// 即将上映(一来就渲染)
function willUp() {
  Ajax({
    url: "http://localhost/project/server/willUp.php",
    data: {},
    success(msg) {
      //获取
      const one = document.getElementById("one");
      // 先清零
      one.innerHTML = "";
      // 渲染
      msg = JSON.parse(msg).slice(0, 4);

      msg.forEach((item) => {
        let str = `
        <ul style="width:200px;">
                <li><a href="##" class="a1"><img src="${item.img}" alt="" class="i1">
                    <div class="imgInfo"><img src="${item.img}" alt="" style="margin-left: -34px;height: 210px;">
                      <p>${item.mingc}</p>
                      <p>类型:${item.leiX}</p>
                      <p>主演:${item.zhuY}</p>
                      <p>上映时间:${item.riQ}</p>
                    </div>
                  </a></li>
              </ul>
        `;
        one.innerHTML += str;
      });
    },
  });
}

willUp();

// 主页下方渲染;
function act() {
  const lis = document.querySelectorAll(".list #ul1 li");

  for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
      if (lis[i].dataset.index == 1) {
        let leiX = "动作";
        //获取
        const bom1 = document.getElementById("two");
        // 先清零
        bom1.innerHTML = "";
        // 调用ajax
        ajax(bom1, leiX);
      }

      if (lis[i].dataset.index == 2) {
        let leiX = "喜剧";
        //获取
        const bom2 = document.getElementById("three");
        // 先清零
        bom2.innerHTML = "";
        // 调用ajax
        ajax(bom2, leiX);
      }

      if (lis[i].dataset.index == 3) {
        let leiX = "惊悚";
        //获取
        const bom3 = document.getElementById("four");
        // 先清零
        bom3.innerHTML = "";
        // 调用ajax
        ajax(bom3, leiX);
      }

      if (lis[i].dataset.index == 4) {
        let leiX = "科幻";
        //获取
        const bom4 = document.getElementById("five");
        // 先清零
        bom4.innerHTML = "";
        // 调用ajax
        ajax(bom4, leiX);
      }

      if (lis[i].dataset.index == 5) {
        let leiX = "爱情";
        //获取
        const bom5 = document.getElementById("six");
        // 先清零
        bom5.innerHTML = "";
        // 调用ajax
        ajax(bom5, leiX);
      }

      if (lis[i].dataset.index == 6) {
        let leiX = "剧情";
        //获取
        const bom6 = document.getElementById("seven");
        // 先清零
        bom6.innerHTML = "";
        // 调用ajax
        ajax(bom6, leiX);
      }

      if (lis[i].dataset.index == 7) {
        let leiX = "传记";
        //获取
        const bom7 = document.getElementById("eight");
        // 先清零
        bom7.innerHTML = "";
        // 调用ajax
        ajax(bom7, leiX);
      }

      if (lis[i].dataset.index == 8) {
        let leiX = "记录";
        //获取
        const bom8 = document.getElementById("nine");
        // 先清零
        bom8.innerHTML = "";
        // 调用ajax
        ajax(bom8, leiX);
      }

      if (lis[i].dataset.index == 9) {
        let leiX = "网络";
        //获取
        const bom9 = document.getElementById("ten");
        // 先清零
        bom9.innerHTML = "";
        // 调用ajax
        ajax(bom9, leiX);
      }

      if (lis[i].dataset.index == 10) {
        let leiX = "其他";
        //获取
        const bom10 = document.getElementById("eleven");
        // 先清零
        bom10.innerHTML = "";
        // 调用ajax
        ajax(bom10, leiX);
      }
    };
  }
}

act();

// Ajax的封装
function ajax(bom, leiX) {
  Ajax({
    url: "http://localhost/project/server/act.php",
    data: { leiX },
    success(msg) {
      msg = JSON.parse(msg).slice(0, 4);

      msg.forEach((item) => {
        let str = `
    <ul style="width:200px;">
          <li><a href="##" class="a1"><img src="${item.img}" alt="" class="i1">
              <div class="imgInfo"><img src="${item.img}" alt="" style="margin-left: -34px;height: 210px;">
                <p>${item.mingc}</p>
                <p>类型:${item.leiX}</p>
                <p>主演:${item.zhuY}</p>
                <p>上映时间:${item.riQ}</p>
              </div>
            </a></li>
        </ul>
    `;
        bom.innerHTML += str;
      });
    },
  });
}
